<!--
 * @Author: your name
 * @Date: 2021-08-05 10:15:39
 * @LastEditTime: 2021-08-16 18:54:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui-master\src\views\yytHome.vue
-->
<template>
  <div>
  <Header></Header>
  <div class="wrapper">  
    <div class="line">
      <div class="titletext">
         当前位置 : 首页 > 融媒
      </div>
    </div>
    <div class="box1">
      <!-- <img src="/resources/img1.jpg" alt=""> -->
     <div class="logo" v-for="item in carousel1" :key="item.id">
          <img :src="item.url" alt="">
      </div>
      <div class="text1">
        <div class="articles">
          <!-- 文章列表 -->
          <ul> 
            <li class="article"
              @click="toArticleHandler(a)"
              v-for="a in articleData.list" :key="a.id">
              <div class="title">{{a.title}}</div>
              <div class="time">
                <span>{{a.publishTime | fmtDate}}</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span>阅读数:{{a.readTimes}}</span>
              </div><br>
            </li>
          </ul>
        </div> 
      </div>
    </div>
    <hr/>
    <div class="box2">
          <div  v-for="item in carousel2" :key="item.id">
          <img :src="item.url" alt="">
      </div>
      <div class="text2"></div> 
    </div>
    <hr/>
    <div class="box3">  
      <div  v-for="item in carousel3" :key="item.id">
          <img :src="item.url" alt="">
      </div> 
      <div class="text2"></div> 
    </div>
    <hr/>
    <div class="box4">
        <div  v-for="item in carousel4" :key="item.id">
          <img :src="item.url" alt="">
      </div>
      <div class="text2"></div> 
    </div>
    <hr/>
    <div class="box5">
        <div  v-for="item in carousel5" :key="item.id">
          <img :src="item.url" alt="">
      </div>
      <div class="text2"></div> 
    </div>
    <hr/>
    
  </div>
  <Footer></Footer>
  </div>
</template>

<script>
import Footer from './components/Footer'
import { get } from '../utils/request'
import Header from './components/Header'
export default {
  components:{
    Header,Footer
  },
  data(){
    return {
     category:{},
     param:{
       page:2,
       pageSize:5
     },
     articleData:{
       list:[]
     },
     carousel1:[],
     carousel2:[],
     carousel3:[],
     carousel4:[],
     carousel5:[],
  }
},
// watch:{
//     '$route.query':{
//       handler(query){
//         this.category = query;
//         this.loadArticles();
//       },
//       deep:true
//     }
//   },
  created(){
    // 获取参数
    // this.category = this.$route.query;
    this.loadArticles();
    this.loadCarousel1();
    this.loadCarousel2();
    this.loadCarousel3();
    this.loadCarousel4();
    this.loadCarousel5();

  },
  methods:{
    toArticleHandler(article){
      this.$router.push({
        path:'/yytarticle',
        query:{
          id:article.id,
          name:article.category?article.category.name:''
        }
      })
    },
    loadArticles(){
      this.loading = true;
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      })
    },
        loadCarousel1(){
        let url='/index/carousel/findAll';
        get(url)
        .then(res => {
            let arr = res.data;
            this.carousel1=arr.slice(14,15);
        })
    },
       loadCarousel2(){
        let url='/index/carousel/findAll';
        get(url)
        .then(res => {
            let arr = res.data;
            this.carousel2=arr.slice(15,16);
        })
    },
       loadCarousel3(){
        let url='/index/carousel/findAll';
        get(url)
        .then(res => {
            let arr = res.data;
            this.carousel3=arr.slice(16,17);
        })
    },
       loadCarousel4(){
        let url='/index/carousel/findAll';
        get(url)
        .then(res => {
            let arr = res.data;
            this.carousel4=arr.slice(17,18);
        })
    },

       loadCarousel5(){
        let url='/index/carousel/findAll';
        get(url)
        .then(res => {
            let arr = res.data;
            this.carousel5=arr.slice(18,19);
        })
    },
    
  }
}
</script>

<style lang="scss" scoped>
// 变量
$color_primary:#028b39;
.line{
  width: 90%;
  height: 40px;
  margin: 0 auto;
  background-color: whitesmoke;
  line-height: 40px;
  margin-top: 100px;
  
}
hr{
  width: 90%;
  color: gray;
}
img{
  width: 17%;
  height: 23%;
  position: absolute;
  cursor: pointer;
}
.box1,.box2,.box3,.box4,.box5{
  width: 80%;
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-top: 20px;
  margin-left: 70px;
  height: 180px;
}
.text1,.text2{
  position: relative;
  margin-left: 280px;
  cursor: pointer;
}
.time{
  margin-top: 133px;
  margin-left: 540px;
}
.titletext{
  margin-left: 10px;
  cursor: pointer;
}
</style>